<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PDF合并工具</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        accent: '#6366F1',
                        neutral: '#6B7280',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .file-input-label {
                @apply border-2 border-dashed border-neutral rounded-lg p-6 text-center cursor-pointer transition-all duration-300 hover:border-primary hover:bg-blue-50;
            }
            .layout-btn {
                @apply px-4 py-2 rounded-md border transition-all duration-300 hover:bg-primary/10 flex items-center gap-2;
            }
            .layout-btn.active {
                @apply bg-primary text-white border-primary;
            }
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
<div class="container mx-auto px-4 py-8 max-w-5xl">
    <header class="text-center mb-10">
        <h1 class="text-[clamp(1.8rem,5vw,3rem)] font-bold text-gray-800 mb-2">
            <i class="fa fa-file-pdf-o text-red-500 mr-2"></i>PDF合并工具
        </h1>
        <p class="text-gray-600 text-lg">合并2-4个PDF文件，自定义布局方式</p>
    </header>

    <main class="bg-white rounded-xl shadow-lg p-6 md:p-8 mb-8">
        <form id="mergeForm" action="/merge" method="post" enctype="multipart/form-data" class="space-y-8">
            <!-- 文件上传区域 -->
            <div>
                <h2 class="text-xl font-semibold text-gray-800 mb-4">选择PDF文件 (2-4个)</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                    <!-- 文件1 -->
                    <div>
                        <label for="pdf1" class="file-input-label block h-full">
                            <i class="fa fa-file-pdf-o text-4xl text-red-500 mb-2"></i>
                            <p class="text-gray-600" id="pdf1Name">文件 1</p>
                            <input type="file" id="pdf1" name="pdf1" accept=".pdf" required
                                   class="hidden" onchange="updateFileName('pdf1')">
                        </label>
                    </div>

                    <!-- 文件2 -->
                    <div>
                        <label for="pdf2" class="file-input-label block h-full">
                            <i class="fa fa-file-pdf-o text-4xl text-red-500 mb-2"></i>
                            <p class="text-gray-600" id="pdf2Name">文件 2</p>
                            <input type="file" id="pdf2" name="pdf2" accept=".pdf" required
                                   class="hidden" onchange="updateFileName('pdf2')">
                        </label>
                    </div>

                    <!-- 文件3 (可选) -->
                    <div>
                        <label for="pdf3" class="file-input-label block h-full">
                            <i class="fa fa-file-pdf-o text-4xl text-red-500 mb-2"></i>
                            <p class="text-gray-600" id="pdf3Name">文件 3 (可选)</p>
                            <input type="file" id="pdf3" name="pdf3" accept=".pdf"
                                   class="hidden" onchange="updateFileName('pdf3')">
                        </label>
                    </div>

                    <!-- 文件4 (可选) -->
                    <div>
                        <label for="pdf4" class="file-input-label block h-full">
                            <i class="fa fa-file-pdf-o text-4xl text-red-500 mb-2"></i>
                            <p class="text-gray-600" id="pdf4Name">文件 4 (可选)</p>
                            <input type="file" id="pdf4" name="pdf4" accept=".pdf"
                                   class="hidden" onchange="updateFileName('pdf4')">
                        </label>
                    </div>
                </div>
            </div>

            <!-- 布局选择 -->
            <div>
                <h2 class="text-xl font-semibold text-gray-800 mb-4">选择合并布局</h2>
                <div class="flex flex-wrap gap-4">
                    <button type="button" class="layout-btn active" data-layout="vertical" onclick="selectLayout('vertical')">
                        <i class="fa fa-align-justify"></i>
                        <span>垂直排列</span>
                    </button>
                    <button type="button" class="layout-btn" data-layout="horizontal" onclick="selectLayout('horizontal')">
                        <i class="fa fa-align-center"></i>
                        <span>水平排列</span>
                    </button>
                    <button type="button" class="layout-btn" data-layout="grid2x2" onclick="selectLayout('grid2x2')">
                        <i class="fa fa-th-large"></i>
                        <span>2x2网格 (4个文件)</span>
                    </button>
                </div>
                <input type="hidden" id="layout" name="layout" value="vertical">
            </div>

            <!-- 合并按钮 -->
            <div class="text-center pt-4">
                <button type="submit" class="bg-primary hover:bg-primary/90 text-white font-semibold py-3 px-8 rounded-lg shadow-md transition-all duration-300 flex items-center justify-center mx-auto gap-2">
                    <i class="fa fa-compress"></i>
                    <span>合并PDF文件</span>
                </button>
            </div>
        </form>
    </main>

    <footer class="text-center text-gray-500 text-sm">
        <p>PDF合并工具 &copy; 2025 | 使用Go语言开发</p>
    </footer>
</div>

<script>
    // 更新显示的文件名
    function updateFileName(id) {
        const input = document.getElementById(id);
        const nameDisplay = document.getElementById(id + 'Name');

        if (input.files && input.files[0]) {
            let fileName = input.files[0].name;
            // 截断长文件名
            if (fileName.length > 15) {
                fileName = fileName.substring(0, 12) + '...';
            }
            nameDisplay.textContent = fileName;
        } else {
            nameDisplay.textContent = id === 'pdf1' || id === 'pdf2'
                ? `文件 ${id.replace('pdf', '')}`
                : `文件 ${id.replace('pdf', '')} (可选)`;
        }
    }

    // 选择布局方式
    function selectLayout(layout) {
        // 更新隐藏字段
        document.getElementById('layout').value = layout;

        // 更新按钮样式
        document.querySelectorAll('.layout-btn').forEach(btn => {
            btn.classList.remove('active');
        });
        document.querySelector(`.layout-btn[data-layout="${layout}"]`).classList.add('active');
    }

    // 表单提交前验证
    document.getElementById('mergeForm').addEventListener('submit', function(e) {
        const pdf1 = document.getElementById('pdf1').files.length > 0;
        const pdf2 = document.getElementById('pdf2').files.length > 0;

        if (!pdf1 || !pdf2) {
            e.preventDefault();
            alert('请至少选择2个PDF文件');
            return false;
        }

        // 检查2x2网格布局是否有4个文件
        const layout = document.getElementById('layout').value;
        const pdf3 = document.getElementById('pdf3').files.length > 0;
        const pdf4 = document.getElementById('pdf4').files.length > 0;

        if (layout === 'grid2x2' && (!pdf3 || !pdf4)) {
            e.preventDefault();
            if (!confirm('2x2网格布局需要4个文件，是否继续使用垂直布局？')) {
                return false;
            }
            // 切换到垂直布局
            document.getElementById('layout').value = 'vertical';
            selectLayout('vertical');
        }

        return true;
    });
</script>
</body>
</html>
